<template>
  <view class="container">
    <scroll-view scroll-y="true" style="width: 100%; height: 100vh" v-if="Object.values(info).length != 0">
      <!-- 地址 -->
      <view class="addaddress" v-if="Object.keys(addressdata).length == 0" @click="chooseaddress">+添加地址</view>
      <view class="address" v-else>
        <view v-if="false"></view>
        <view v-else class="addressbox" @click="chooseaddress">
          <view style="flex: 1">
            <view style="display: flex; align-items: center; font-weight: bold; font-size: 28rpx; color: #333333">
              <view style="margin-right: 20rpx">{{ addressdata.name }}</view>
              <view>{{ addressdata.mobile }}</view>
            </view>
            <view
              style="
                font-weight: 500;
                font-size: 24rpx;
                color: #333333;
                margin-top: 12rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
              "
            >
              {{ addressdata.address + addressdata.detail_address }}
            </view>
          </view>
          <uni-icons type="right" size="20" color="#000"></uni-icons>
        </view>
      </view>
      <!-- 教师列表 -->
      <view class="teacherlist">
        <view class="listitem">
          <image :src="imgUrl + info.avatar" mode="aspectFill" style="width: 186rpx; height: 186rpx"></image>
          <view class="right">
            <view class="righttop">
              <view style="display: flex; align-items: center">
                <view class="username">{{ info.byname }}</view>
                <view class="usercareer">{{ info.identity_name }}</view>
              </view>
              <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 26rpx; color: #222222">{{ info.host_grade + '/' + info.host_subject }}</view>
            </view>
            <view class="rightmiddel">
              <view class="teachage">教龄{{ info.teaching_len }}年</view>
              <view class="money">￥{{ info.price }}/起</view>
            </view>
            <view class="rightbottom">
              <view class="hobbylist">授课时长{{ info.teaching_num }}小时</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 教学类别 -->
      <view class="title">教学类别</view>
      <view style="margin-top: 18rpx; margin-bottom: 36rpx; display: flex">
        <!-- 主教 -->
        <view :class="{ leibie: true, common: subjectindex == 1 }" @click="choosezhujiao">
          <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 28rpx; color: #3553e8">主教</view>
          <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 28rpx; color: #222222; margin: 18rpx 0">
            {{ info.host_grade + '/' + info.host_subject }}
          </view>
          <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 24rpx; color: #ff3400">{{ info.price }}</view>
        </view>
        <!-- 辅教 -->
        <view :class="{ leibie: true, common: subjectindex == 2 }" @click="choosefujiao" v-if="info.assist_subject != ''">
          <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 28rpx; color: #3553e8">辅教</view>
          <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 28rpx; color: #222222; margin: 18rpx 0">
            {{ info.assist_grade + '/' + info.assist_subject }}
          </view>
          <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 24rpx; color: #ff3400">{{ info.price }}</view>
        </view>
      </view>
      <!-- 购买课时 -->
      <view class="title">购买课时</view>
      <view class="buykeshi">
        <view :class="{ keshi: true, keshicommon: keshiindex == index }" v-for="(item, index) in timelist" :key="item.id" @click="choosekehsi(index, item.id)">
          {{ item.name }}
        </view>
      </view>
      <!-- 上课时间选择 -->
      <view class="title">上课时间选择</view>
      <view class="choosetime" @click="gosktime">
        <view class="shijian">{{ week != '' ? week + '(共' + subjectnum + '课时)' : '共几课时' }}</view>
        <uni-icons type="right" size="20" color="#222222"></uni-icons>
      </view>
      <!-- 选择优惠券 -->
      <view class="title">选择优惠券</view>
      <view class="choosetime" @click="goyhj">
        <view class="shijian">{{ discount ? discount : '暂无优惠券' }}</view>
        <uni-icons type="right" size="20" color="#222222"></uni-icons>
      </view>
      <!-- 购买立即支付 -->
      <view class="bug">
        <view style="display: flex; align-items: center">
          <view class="price">￥{{ amount_money != '' ? amount_money : totalmoney }}</view>
          <view class="totalkeshi">共计{{ timelist[keshiindex].name ? timelist[keshiindex].name : '0' }}</view>
        </view>
        <view class="pay" @click="fnpay">立即支付</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      info: {}, // 用户的信息
      imgUrl: '', // 图片的基地址
      subjectindex: null,
      keshiindex: null,
      timelist: [],
      coupon_log_id: [], // 优惠券id
      period_id: '', //课时id
      teacher_setup_id: '', // 时间段的id
      currentId: '', // 页面路径传递的id
      addressdata: {},
      week: '', // 显示周几的课时
      subjectnum: '', //  共几课时
      totalmoney: '', // 总价格
      discount: '', //显示折扣
      coupon_money_rebate: '', //折扣
      coupon_money_use: '', //代金卷优惠金额
      total_money: '', // 没有优惠金额
      amount_money: '' //优惠后金额
    };
  },
  methods: {
    // 获取地址列标
    async getaddresslist() {
      // is_default
      const res = await uni.$http.post('/address/list');
      console.log('地址列表', res.data.data.list);
      res.data.data.list.forEach((item) => {
        if (item.is_default == 1) {
          this.addressdata = item;
          this.$store.commit('saveaddress', this.addressdata);
        }
      });
    },
    // 下单
    async fnpay() {
      console.log(this.subjectindex);
      if (!this.subjectindex) {
        return uni.showToast({
          title: '请选择教学科目',
          icon: 'none'
        });
      }
      const res = await uni.$http.post('/user_order/addOrder', {
        teacher_id: uni.getStorageSync('skid'),
        period_id: String(this.$store.state.keshiid),
        address_id: String(this.addressdata.id),
        grade_name: this.$store.state.subjectindex == 1 ? this.info.host_grade : this.info.assist_grade,
        subject_name: this.$store.state.subjectindex == 1 ? this.info.host_subject : this.info.assist_subject,
        price: this.info.price,
        coupon_log_id: this.coupon_log_id.join(','),
        coupon_money_rebate: this.coupon_money_rebate,
        coupon_money_use: this.coupon_money_use,
        total_money: this.total_money,
        amount_money: this.amount_money,
        teacher_setup_id: this.$store.state.teacher_setup_id,
        bishop: String(this.$store.state.keshiindex),
        advance: this.subjectnum
      });
      console.log('立即下单', res);
      // 下单支付
      const res2 = await uni.$http.post('/user_order/orderPay', {
        order_id: res.data.data.order_id
      });
      console.log('下单支付', res2);
      this.pay(res2.data.data);
      // const orderinfo = await uni.$http.post('/user_order/details', {
      //   order_id: res2.data.data.order_id
      // });
    },
    // 支付
    pay(e) {
      uni.requestPayment({
        provider: 'wxpay',
        package: e.package,
        paySign: e.paySign,
        nonceStr: e.nonceStr,
        timeStamp: e.timeStamp,
        signType: e.signType,
        success: (res3) => {
          console.log('支付结果', res3);
          uni.reLaunch({
            url: '/parents/payok/payok'
          });
        },
        fail: (res) => {
          uni.reLaunch({
            url: '/parents/payfalse/payfalse'
          });
        }
      });
    },
    // 获取下单页面的数据
    async getifo(id) {
      const res = await uni.$http.post('/user_order/index', {
        teacher_id: id
      });
      // console.log('页面的数据', res);
      this.info = res.data.data;
    },
    // 计算订单价格
    async reduceorder(id, ksid, yhjid) {
      const res = await uni.$http.post('/user_order/orderPrice', {
        teacher_id: id,
        period_id: ksid,
        coupon_log_id: yhjid // 优惠卷id
      });
      // console.log('有优惠券之后的价格', res);
      this.amount_money = res.data.data.amount_money;
      this.coupon_money_rebate = res.data.data.coupon_money_rebate;
      this.coupon_money_use = res.data.data.coupon_money_use;
      this.total_money = res.data.data.total_money;
    },
    // 获取课时列表
    async gettimelist() {
      const res = await uni.$http.post('/index/periodList');
      // console.log('课时列表', res);
      this.timelist = res.data.data.list;
    },
    // 选择教学科目
    choosezhujiao() {
      this.subjectindex = 1;
      this.$store.commit('savesubject', this.subjectindex);
    },
    // 选择教学科目
    choosefujiao() {
      this.subjectindex = 2;
      this.$store.commit('savesubject', this.subjectindex);
    },
    // 选择课时
    async choosekehsi(index, id) {
      this.keshiindex = index;
      this.period_id = id;
      this.$store.commit('savekeshiid', this.period_id);
      this.$store.commit('savekeshi', this.keshiindex);
      // 计算价格
      if (this.coupon_log_id.length != 0) {
        this.coupon_log_id = [];
        this.discount = '';
      }
      console.log('课时的id', this.coupon_log_id);
      const res = await uni.$http.post('/user_order/orderPrice', {
        teacher_id: uni.getStorageSync('skid'),
        period_id: this.period_id,
        coupon_log_id: this.coupon_log_id.join(',')
      });
      // console.log('选择课时，计算价格', res);
      this.amount_money = res.data.data.amount_money;
      this.totalmoney = res.data.data.total_money;
    },
    // 跳转到优惠券
    goyhj() {
      if (this.period_id == '') {
        return uni.showToast({
          title: '请先选择课时',
          icon: 'none'
        });
      }
      uni.navigateTo({
        url: '/parents/chooseyhj/chooseyhj?id=' + this.period_id + '&money=' + this.totalmoney
      });
    },
    // 跳转到上课预约
    gosktime() {
      if (this.period_id == '') {
        return uni.showToast({
          title: '请先选择课时',
          icon: 'none'
        });
      }
      uni.navigateTo({
        url: '/parents/sktime/sktime?id=' + this.currentId + '&subjectid=' + this.period_id
      });
    },
    // 选择上门地址
    chooseaddress() {
      uni.navigateTo({
        url: '/parents/addresslist/addresslist'
      });
    }
  },
  onLoad(e) {
    console.log(e);
    if (e.data) {
      this.addressdata = JSON.parse(e.data);
      this.$store.commit('saveaddress', JSON.parse(e.data));
    }
    if (e.id) {
      uni.setStorageSync('skid', e.id);
    }
    if (e.idlist) {
      this.subjectnum = JSON.parse(e.idlist).length;
      this.teacher_setup_id = JSON.parse(e.idlist).join(',');
      this.$store.commit('savesubjectnum', this.teacher_setup_id);
    }
    if (e.week) {
      this.week = JSON.parse(e.week).join(',');
      this.$store.commit('saveweek', this.week);
    }
    if (e.yhjid) {
      const yhjidlist = JSON.parse(e.yhjid);
      // if (yhjidlist.length == 0) {
      // }
      yhjidlist.forEach((item) => {
        this.coupon_log_id.push(item.id);
        if (item.status_name == '满减金额劵') {
          this.discount += '-￥' + item.coupon_price + '元';
        } else if (item.status_name != '满减金额劵') {
          this.discount += '+' + item.coupon_price + '折';
        }
      });
    }
    this.currentId = e.id || uni.getStorageSync('skid');

    // 配置图片的基地址
    this.imgUrl = this.imgurl;
    // 获取课时列表
    this.gettimelist();
    // 获取地址列表
    if (Object.keys(this.$store.state.address).length == 0) {
      this.getaddresslist();
    }
  },
  onShow() {
    // 获取页面的数据
    this.getifo(this.currentId);
    // 页面的的数据回显（从store仓库拿数据）
    if (this.$store.state.keshiindex != '' && this.$store.state.keshiid != '') {
      this.keshiindex = this.$store.state.keshiindex;
      this.period_id = this.$store.state.keshiid;
    }
    if (Object.keys(this.$store.state.address).length != 0) {
      this.addressdata = this.$store.state.address;
    }
    if (this.$store.state.subjectindex != '') {
      this.subjectindex = this.$store.state.subjectindex;
    }

    if (this.$store.state.week != '') {
      this.week = this.$store.state.week;
    }
    if (this.$store.state.teacher_setup_id != '') {
      this.teacher_setup_id = this.$store.state.teacher_setup_id;
      this.subjectnum = this.teacher_setup_id.split(',').length;
    }
    if (this.coupon_log_id.join(',') != '') {
      // 再次计算有优惠券的价格
      this.reduceorder(uni.getStorageSync('skid'), this.$store.state.keshiid, this.coupon_log_id.join(','));
    }
    if (this.coupon_log_id.join(',') == '' && this.$store.state.keshiid != '') {
      this.reduceorder(uni.getStorageSync('skid'), this.$store.state.keshiid, '');
    }
  },
  onUnload() {
    console.log('页面关闭了', this.$store.state.test);
    this.$store.commit('saveaddress', {});
    this.$store.commit('savesubject', '');
    this.$store.commit('savekeshi', '');
    this.$store.commit('saveweek', '');
    this.$store.commit('saveaddress', '');
    this.$store.commit('savesubjectnum', '');
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding: 30rpx 20rpx;
  .addaddress {
    box-sizing: border-box;
    width: 710rpx;
    height: 114rpx;
    text-align: center;
    line-height: 114rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #3553e8;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin-bottom: 32rpx;
  }
  .address {
    box-sizing: border-box;
    width: 710rpx;
    height: 146rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin-bottom: 32rpx;
    .addressbox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      width: 710rpx;
      height: 146rpx;
    }
  }
  .teacherlist {
    .listitem {
      box-sizing: border-box;
      display: flex;
      width: 710rpx;
      height: 190rpx;

      margin-bottom: 30rpx;
      .right {
        flex: 1;
        margin-left: 20rpx;
        .righttop {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .usercareer {
            box-sizing: border-box;
            width: 104rpx;
            height: 40rpx;
            background: #eaedfd;
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            color: #3553e8;
            text-align: center;
            line-height: 40rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .username {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #222222;
            margin-right: 14rpx;
          }
        }
        .rightmiddel {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 12rpx;
          .teachage {
            font-weight: 500;
            font-size: 26rpx;
            color: #222222;
          }
          .money {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 24rpx;
            color: #ff3400;
          }
        }
        .rightbottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 40rpx;
          .hobbylist {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            color: #222222;
          }
          .long {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #222222;
          }
        }
      }
    }
  }
  .title {
    box-sizing: border-box;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 30rpx;
    padding-left: 12rpx;
    color: #222222;
    border-left: 8rpx solid #3553e8;
    margin: 20rpx 0;
  }
  .leibie {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 220rpx;
    height: 220rpx;
    margin-right: 20rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #f1f1f1;
  }
  .common {
    background: #e6ebff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #3553e8;
  }
  .buykeshi {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    .keshi {
      box-sizing: border-box;
      width: 212rpx;
      height: 60rpx;
      margin-right: 30rpx;
      text-align: center;
      line-height: 60rpx;
      background: #f8f8f8;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
      border: 2rpx solid #f1f1f1;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #000;
    }
    .keshicommon {
      background: #ebeeff;
      border: 2rpx solid #3553e8;
      color: #3553e8;
    }
  }
  .choosetime {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 700rpx;
    height: 100rpx;
    padding: 30rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .shijian {
      flex: 1;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #222222;
    }
  }
  .bug {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 710rpx;
    height: 120rpx;
    margin-top: 30rpx;
    background: #ffffff;
    box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(172, 172, 172, 0.1);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    .price {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #ff0000;
    }
    .totalkeshi {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #222222;
    }
    .pay {
      box-sizing: border-box;
      width: 320rpx;
      height: 80rpx;
      margin-left: 52rpx;
      text-align: center;
      line-height: 80rpx;
      color: #fff;
      background: #3553e8;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
  }
}
</style>
